<template>
  <div>
    <el-dialog v-model="centerDialogVisible" :title="Warning" width="50%" center>
    <div>
      <div>
        已执行群聊(1)
      </div>
      <div style="margin-top: 10px;">
        <el-select v-model="value" class="m-2" placeholder="">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="value" class="m-2" placeholder="" style="margin: 0 10px;">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="value" class="m-2" placeholder="">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button type="primary" plain style="float: right;margin-left: 10px;">批量移除群聊</el-button>
        <el-button type="primary" plain style="float: right" :icon="Plus" @click="addapi()">添加群聊</el-button>
        
      </div>
      <div>
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="群聊" width="120">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column property="name" label="群主" width="120" />
          <el-table-column property="address" label="以应用任务" show-overflow-tooltip />
          <el-table-column property="address" label="群标签" show-overflow-tooltip />
          <el-table-column property="address" label="操作" show-overflow-tooltip />
        </el-table>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="addshow" title="添加群聊" width="50%" center>
    <div></div>
    <div>
      <el-row :gutter="20">
        <el-col :span="18"><div class="grid-content ep-bg-purple" style="min-height: 500px;">
          <div>
            已执行群聊(1)
          </div>
          <div style="margin-top: 10px;">
            <el-select v-model="value" class="m-2" placeholder="Select">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-model="value" class="m-2" placeholder="Select" style="margin: 0 10px;">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select v-model="value" class="m-2" placeholder="Select">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
      </div>
      <div>
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="群聊名称" width="120">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column property="address" label="群标签" show-overflow-tooltip />
        </el-table>
      </div>
        </div></el-col>
        <el-col :span="6"><div class="grid-content ep-bg-purple" style="min-height: 500px;">
          <div style="border-left: 1px solid #eee;">
            <span>已选择的群聊:(0)</span>
            <span style="float: right;color: #409EFF;cursor:pointer;">全部清空</span>
          </div>
        </div></el-col>
      </el-row>
    </div>
  </el-dialog>
  </div>
</template>
<script setup>
import { ref,defineExpose } from "vue";
import { Plus } from '@element-plus/icons-vue'
var centerDialogVisible=ref(false)
var addshow = ref(false)
const Warning=ref('')
const editshow=(val)=>{
  Warning.value=val.name
  centerDialogVisible.value = val.show
}
const addapi = () =>{
  addshow.value=true
}
defineExpose({editshow,addapi})
</script>
<style>

</style>